<!DOCTYPE html style="height:100%" >

<head>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    <title>FHMaps</title>
    
    <link type="text/css" 
    	  href="tabs/css/flick/jquery-ui-1.8.16.custom.css" 
          rel="stylesheet" />	
          
        <!-- Google Maps API -->
        <script type="text/javascript" 
	 		 src="http://maps.google.com/maps/api/js?v=3.7&sensor=false">
        </script>  
		
        <!-- JQuery -->
		<script type="text/javascript" 
				src="tabs/js/jquery-1.6.2.min.js">
		</script>
      
    <script type="text/javascript">
	
	// Vordefinierte Skalierungen der Karte
	var geo_fachhochschule = new google.maps.LatLng(49.260618564772074,7.360246794967679);

	
	// Karte initialisieren
	var map = null;
	
	 // Definieren der Icons
    var customIcons = {
	  wohnheim: {
        icon: './icons/wohnheim.png'
      }
    };

	  // Karte initialisieren
    function initialize() {
      map = new google.maps.Map(document.getElementById("map"), {
        mapTypeId: 'terrain',
		navigationControl: false,
  		mapTypeControl: false,
  		scaleControl: false,
		mapTypeId: google.maps.MapTypeId.SATELLITE
      });
	  
			
			// Icon setzen
			type="wohnheim";
          	var icon = customIcons[type] || {};
			
			// Content InfoWindow
        	var content = "Fachhochschule Kaiserslautern";
        
			// InfoWindow initialisieren
			var infowindow = new google.maps.InfoWindow({
				content: content
			});
		  
		  	// Marker erstellen
          	var marker = new google.maps.Marker({
				map: map,
				position: geo_fachhochschule,
				icon: icon.icon,
				shadow: icon.shadow
         	});
			
			// Actionlistener: Mittels Klick auf den Marker InfoWindow öffnen
        	google.maps.event.addListener(marker, 'click', function() {
            	infowindow.open(map,marker);
        	}); 

	  // Die Karte auf die Fachhochscuhule skalieren
	  // map.fitBounds(latlngbounds);
	  map.setCenter(geo_fachhochschule);
	  map.setZoom(17);

	}
	
	  // Anzeige einer Route zur Fachhochschule
	  // Vordefinierte Zieladresse: Zweibrücken, Amerikastr.1
      function showRoute(){
        
        // Start und Zielpunkt der Route
        var plz = document.getElementById("txt_plz").value;
		var ort = document.getElementById("txt_ort").value;
        var ziel = "Zweibrücken, Amerikastr.1";
        
        // Adresse um die Anfrage abzusenden
        var routeString = "http://maps.google.com/maps?q=";

        // Erweiterung --> Startpunkt
        routeString+="from:"+plz+" "+ort; 
 
        // Erweiterung --> Zielpunkt
        routeString+=" to:"+ziel; 
    
        // Druckansicht öffnen
        window.open(routeString);
      }
	  
	  
  </script>

  <link href="css/style.css" 
  	    rel="stylesheet" 
        type="text/css">
        
  <link href="css/error.css" 
  		rel="stylesheet" 
        type="text/css">
  
</head>

<body style="height:400px; width:600px;" leftmargin="50" topmargin="50"
  			  onload="initialize();">

               
  <!-- Google Maps Karte -->    
  <div id="map" style="width:100%; height:100%;">
  
  </div>
  
  
<br><br>
  <label for="txt_plz"></label>
  <input name="txt_plz" class="textfeld" type="text" id="txt_plz" size="5" maxlength="5">
  </div>

<input name="txt_ort" type="text" class="textfeld" id="txt_ort" size="50" maxlength="50">
<input type="submit" name="button" id="button" value="Weg zur Fachhochschule" onClick="showRoute();">
</body>

</html>